import { Ionicons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import {
  TextStyle,
  View,
  FlatList,
  Dimensions,
  TouchableOpacity,
  Text,
  StyleSheet,
} from "react-native";
import Modal from "react-native-modal";
import { Colors } from "@/contants/Colors";
import { LANGS } from "@/contants/SystemSettings";
import { userStore } from "@/store";
import { useTranslation } from "react-i18next";

const { width, height } = Dimensions.get("window");

type LangProps = {
  style?: TextStyle;
};

type LangChooseModalProps = {
  isVisible: boolean;
  onClose: () => void;
};

type ItemData = {
  code: string;
  langkey: string;
};

const LangChooseModal: React.FC<LangChooseModalProps> = ({
  isVisible,
  onClose,
}) => {
  const { t } = useTranslation();

  const changeLocale = (lang: string) => {
    userStore.setUserLang({ lang });
  };

  const renderLang = ({ item }: { item: ItemData }) => {
    return (
      <TouchableOpacity
        onPress={() => {
          changeLocale(item.code);
          onClose();
        }}
        style={[
          {
            padding: 20,
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightgrey,
          },
        ]}
      >
        <Text style={[{ flex: 1, color: Colors.black }]} numberOfLines={2}>
          {t(item.langkey)}
        </Text>
      </TouchableOpacity>
    );
  };
  return (
    <Modal
      avoidKeyboard
      propagateSwipe
      isVisible={isVisible}
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
    >
      <View
        style={{
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 3.84,
          flexDirection: "row",
          alignItems: "center",
          elevation: 5,
          borderRadius: 10,
        }}
      >
        <View style={{}}>
          <View>
            <Text style={[{ color: "black" }]}>
              {t("flang_change_language")}
            </Text>
          </View>

          <FlatList
            style={{
              backgroundColor: Colors.white,
              borderRadius: 10,
              width: width - 40,
            }}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            data={LANGS}
            keyExtractor={(item, index) => `${index}`}
            renderItem={renderLang}
          />
        </View>
      </View>
    </Modal>
  );
};

const Lang: React.FC<LangProps> = ({ style }) => {
  const [langModalVisible, setLangModalVisible] = useState(false);
  return (
    <>
      <Ionicons
        onPress={() => setLangModalVisible(true)}
        name="language"
        size={32}
        color={Colors.white}
        style={[style]}
      />
      <LangChooseModal
        isVisible={langModalVisible}
        onClose={() => {
          setLangModalVisible(!langModalVisible);
        }}
      />
    </>
  );
};

export default Lang;

const styles = StyleSheet.create({
  languageContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 20,
  },
  languageText: {
    color: "#fff",
    fontSize: 14,
  },
});
